<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>个人简历</title>
  


   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">  
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  

<style>
.jumbotron {
  position: relative;
  padding: 40px 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
  background: #369CC1; /* Old browsers */
  }
.subhead {
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.subhead h1 {
  font-size: 60px;
}
.subhead p {
  margin-bottom: 20px;
}
.subhead .navbar {
  display: none;
}
body {

  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #ffffff;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
  width: 500px;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;

}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
h1,
h2,
h3 {
  line-height: 40px;
}

h1 {
  font-size: 38.5px;
}

h2 {
  font-size: 31.5px;
}

h3 {
  font-size: 24.5px;
}

h4 {
  font-size: 17.5px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 11.9px;
}

h1 small {
  font-size: 24.5px;
}

h2 small {
  font-size: 17.5px;
}

h3 small {
  font-size: 14px;
}

h4 small {
  font-size: 14px;
}
.test{margin-top:50px;}
.z1{width: 500px;}
.tp{height:200px;width: 300px;float:right;border-radius: 50%;}
#lb{float:right;margin-right:300px;}
  .fade-in-words{
  width: 800px;
  margin: 0 auto;
  margin-left: 0px;
}


@keyframes fade-in{  
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-webkit-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-ms-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-o-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-moz-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
.first-words{ 
    opacity: 0;      
    animation: fade-in 2s ease 0s 1;    
    -webkit-animation: fade-in 2s ease 0s 1;
    -moz-animation: fade-in 2s ease 0s 1;
    -o-animation: fade-in 2s ease 0s 1;
    -ms-animation: fade-in 2s ease 0s 1;
    
    
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.second-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 2s 1;
    -webkit-animation: fade-in 2s ease 2s 1;
    -moz-animation: fade-in 2s ease 2s 1;
    -o-animation: fade-in 2s ease 2s 1;
    -ms-animation: fade-in 2s ease 2s 1;
    
    
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.third-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 4s 1;
    -webkit-animation: fade-in 2s ease 4s 1;
    -moz-animation: fade-in 2s ease 4s 1;
    -o-animation: fade-in 2s ease 4s 1;
    -ms-animation: fade-in 2s ease 4s 1;
    
    
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.four-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 6s 1;
    -webkit-animation: fade-in 2s ease 6s 1;
    -moz-animation: fade-in 2s ease 6s 1;
    -o-animation: fade-in 2s ease 6s 1;
    -ms-animation: fade-in 2s ease 6s 1;
    
   
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.five-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 8s 1;
    -webkit-animation: fade-in 2s ease 8s 1;
    -moz-animation: fade-in 2s ease 8s 1;
    -o-animation: fade-in 2s ease 8s 1;
    -ms-animation: fade-in 2s ease 8s 1;
    
    
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.six-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 10s 1;
    -webkit-animation: fade-in 2s ease 10s 1;
    -moz-animation: fade-in 2s ease 10s 1;
    -o-animation: fade-in 2s ease 10s 1;
    -ms-animation: fade-in 2s ease 10s 1;
    
   
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.seven-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 12s 1;
    -webkit-animation: fade-in 2s ease 12s 1;
    -moz-animation: fade-in 2s ease 12s 1;
    -o-animation: fade-in 2s ease 12s 1;
    -ms-animation: fade-in 2s ease 12s 1;
    
    
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.eight-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 14s 1;
    -webkit-animation: fade-in 2s ease 14s 1;
    -moz-animation: fade-in 2s ease 14s 1;
    -o-animation: fade-in 2s ease 14s 1;
    -ms-animation: fade-in 2s ease 14s 1;
    
   
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.nine-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 16s 1;
    -webkit-animation: fade-in 2s ease 16s 1;
    -moz-animation: fade-in 2s ease 16s 1;
    -o-animation: fade-in 2s ease 16s 1;
    -ms-animation: fade-in 2s ease 16s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
.ten-words{ 
    opacity: 0;    
    animation: fade-in 2s ease 18s 1;
    -webkit-animation: fade-in 2s ease 18s 1;
    -moz-animation: fade-in 2s ease 18s 1;
    -o-animation: fade-in 2s ease 18s 1;
    -ms-animation: fade-in 2s ease 18s 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}
</style>


  </head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">




<header class="jumbotron subhead" id="overview">
  	
	<div id="soccer">
	<div id="lb" class="carousel slide" style="width:300px;;">  
 
   <div class="carousel-inner">  
      <div id="pic0" class="item active">  
         <img class="tp"src="http://www.cctiedu.com/uploads/allimg/150211/25-1502111K1191L.jpg" alt="First slide">  
      </div>  
      <div id="pic1" class="item">  
         <img class="tp"src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484730881948&di=3df33dea154111f3154315e08efa1c11&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D1f454fa0d539b6004dce0fbfd9513526%2F7bec54e736d12f2eb3b3e2234fc2d5628535683a.jpg" style="height:200px;" alt="Second slide">  
      </div>  
 
   </div>  
  
</div>
	</div>
  <div class="container">
  	
    <h1 class="z1">欢 迎<small>/ Welcome</small>  </h1>
    <p class="lead">这是方跃的简历！</p>
    
  
  </div>
</header>

  <div class="container">

    <div class="row">
      <div class="span12">




        <section>
        <div class="fade-in-words">
            <div class="first-words">        <h2>求职意向</h2>
            
            <h4>我希望得到一份网页前端工程师的工作。</h4></div>
            <div class="second-words">            <h2 class="test">自我描述</h2>
            
            <h4>我叫方跃，是软件专业的一名应届毕业生，因为来自农村的普通家庭，所以吃苦的能力强一些。<br/>对待工作认真，善于沟通，有较强的团队精神。乐于学习，比较乐观。</h4></div>
            <div class="third-words">            <h2 class="test">个人爱好</h2>
            
            <h4>喜欢打篮球 还喜欢自己做一些吃的</h4></div>
            <div class="four-words">            <h2 class="test">擅长的软件</h2>
            
            <h4>notepad++</h4>
      <h4>dreamweaver</h4>
      <h4>HTML5</h4>
      <h4>CSS3</h4>
      <h4>JavaScript</h4></div>
            <div class="five-words">            <h2 class="test">校内实践</h2>
            
            <h4>学校组织实训，我选择了制作网页的项目，在实训中学到了很多知识，积累了很多经验。</h4></div>
            <div class="six-words">            <h2 class="test">校外实践</h2>
            
            <h4>大二上学期，学校组织实训进行社会调研。在这次实训中锻炼了我的社交能力，为以后在实际工作中打下了基础。</h4></div>
            <div class="seven-words">            <h2 class="test">遇到的一些问题</h2>
            <h4>在制作网页的时候遇到了一些问题，由于刚刚接触一些js的代码，所以在使用上面还是不太熟悉，还需要去网站上面找代码，所以需要加强js方面的练习。在一些框架的使用上面还是不太熟练，所以还需要在今后的学习中加强在框架方面的学习。
            </h4>  </div>
            <div class="eight-words">            <h2 class="test">荣誉情况</h2>
            <h4>2015-2016快乐学习奖学金二等</h4> </div>
            <div class="nine-words">            <h2 class="test">联系方式</h2>
      <h4>手机：18240107886</h4>
      <h4>邮箱：1459714412@qq.com</h4>
          <h4>QQ:   1459714412</h4></div>
        <div class="ten-words"><h2 class="test">做的作品</h2>
        <a href="http://git.oschina.net/fangyue.com/zuopin"><h3>点我进入</h3></a>
        </div>
        </div>     
        </section>
         </div>
    </div>

  </div>

<script>  
var i=0;  
var c = null;  
    c = setTimeout(carousel,1000);
    function carousel()  
    {  
          
       clearTimeout(c);
      $("#pic"+i).removeClass("active");  
      $("#pic"+(i+1)).addClass("active");  
      i++;  
      $("ol li").removeClass("active");  
      $("ol li:eq("+i+")").addClass("active");  
        
      if(i>1){  
        $("#pic"+(i-1)).removeClass("active");  
        $("#pic0").addClass("active");  
        i=0;  
        $("ol li:eq("+i+")").addClass("active");  
        
      }  
       c = setTimeout(carousel,1000);              
    }   
  
</script> 

  </body>
</html>
